<template>
  <div class="pagecontent">
    <div class="commonheader">
      <i class="iconback"
         @click="backClick"></i>
    </div>
    <div class="muicontent">
      <div class="swiperimg">
        <nut-swiper direction="horizontal"
                    ref="demo2"
                    :canDragging="false"
                    :paginationVisible="true">
          <div v-for="(item,index) in dataItem"
               :key="index"
               class="nut-swiper-slide">
            <span><img :src="item" /></span>
          </div>
        </nut-swiper>
      </div>
      <div class="goodsname">{{detaildata.name}}</div>
      <h3 class="detialh3">详情</h3>
      <ul class="detailbox">
        <li>
          <em>系列</em><span>{{detaildata.series}}</span>
        </li>
        <li>
          <em>描述</em><span>{{detaildata.character_style}}</span>
        </li>
        <li>
          <em>款式</em><span>{{detaildata.function_style}}</span>
        </li>
        <li>
          <em>型号</em><span>{{detaildata.size}}</span>
        </li>
        <li>
          <em>颜色</em><span>{{detaildata.colour}}</span>
        </li>
        <li>
          <em>材质</em><span>{{detaildata.material}}</span>
        </li>
      </ul>
    </div>
    <div class="btn"><a class="u-button"
         @click="btnClick">前往估价</a></div>
  </div>
</template>

<script>
import Bus from '../../../static/js/bus'
export default {
  name: 'goodsDetail',
  data () {
    return {
      detaildata: [],
      thingsObj: {},
      dataItem: [
        // {
        //   src: '../../../static/images/upload/pic07.png'
        // },
        // {
        //   src: '../../../static/images/upload/pic07.png'
        // },
        // {
        //   src: '../../../static/images/upload/pic07.png'
        // }
      ]
    }
  },
  mounted () {
    this.$http.post(`${this.baseUrl.findItemByItemId}`, {
      itemId: this.$route.query.itemId
    }).then((res) => {
      this.detaildata = res.data.data
      this.dataItem.push(res.data.data.url)
      // console.log(this.dataItem)
    })
  },
  beforeDestroy () {
    Bus.$emit('senddetaildata', this.detaildata)
  },
  methods: {
    btnClick () {
      // this.thingsObj = {
      //   title: this.detaildata.name,
      //   gseries: this.detaildata.series
      // }
      // this.$store.commit('typeidChangeClick', this.thingsObj)
      this.$router.push({ path: '/evaluateNumber' })
    },
    backClick () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="stylus" scoped>
.muicontent
  position absolute
  top 0.9rem
  bottom 1rem
  left 0
  right 0
  overflow-y auto
.swiperimg
  height 7.5rem
.nut-swiper
  height 7.5rem
.swiperimg >>> .nut-swiper .nut-swiper-pagination .swiper-pagination-bullet.active
  background-color #d21733
.swiperimg >>> .nut-swiper.horizontal .nut-swiper-pagination
  bottom 0.4rem
.goodsname
  font-size 0.32rem
  color #333
  padding 0.3rem 0.3rem 0.4rem 0.3rem
  line-height 1.3
  font-weight bold
  border-top 1px solid #dbdbdb
.detialh3
  font-size 0.32rem
  color #666
  line-height 0.7rem
  background #f6f5f5
  padding-left 0.3rem
.detailbox
  padding 0.2rem 0 0 0
  li
    list-style none
    line-height 0.5rem
    em
      font-style normal
      display inline-block
      padding-left 0.3rem
      width 1.78rem
.btn
  position fixed
  height 0.9rem
  line-height 0.9rem
  left 1.3rem
  right 1.3rem
  bottom 0.1rem
  .u-button
    font-size 0.32rem
    color #fff
    text-align center
    border-radius 0.08rem
    display block
    background #d21733
</style>
